import React, { useEffect, useState } from 'react'

import { Col, Row, Card, Table } from 'antd'
import * as Icon from '@ant-design/icons'

import './home.scss'

import { getHomeGoods } from '@/api/home'

import MyEchart from '@/components/echarts'

import defaultImg from '@/assets/picture/default.png'
import { countData } from '@/config/staticData'
const Column = [
  {
    title: '课程',
    dataIndex: 'name'
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy'
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy'
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy'
  }
]

interface EchartProps {
  xAxis?: string[]
  series: {
    name: string
    type: string
    data: number[] | { value: number; name: string }[]
  }[]
}
const Home = () => {
  const [tableData, setTableData] = useState<HomeData.HomeGoodsItem[]>([])
  const [orderData, setOpderData] = useState<EchartProps>({
    xAxis: [],
    series: []
  })
  const [barData, setBarData] = useState<EchartProps>({
    xAxis: [],
    series: []
  })
  const [pieData, setPieData] = useState<EchartProps>({
    series: []
  })

  // 获取数据
  const getGoods = async () => {
    const res = await getHomeGoods()
    console.log('MyEchart =>>', res)
    setTableData(res.data.tableData)
    formatData(res.data.orderData)
    formatBarData(res.data.userData)
    formatPieData(res.data.videoData)
  }
  // 动态创建图标组件
  const iconCreate = (icon: string) => React.createElement(Icon[icon])

  // 格式化折线图所需数据
  const formatData = (data: { date: string[]; data: HomeData.OrderData[] }) => {
    const xAxis = data.date
    const keyArray = Object.keys(data.data[0])
    const series = keyArray.map(key => {
      return {
        name: key,
        type: 'line',
        data: data.data.map(item => item[key])
      }
    })

    setOpderData({ xAxis, series })
  }
  // 格式柱状图所需数据
  const formatBarData = (data: HomeData.UserData[]) => {
    const xAxis = data.map(item => item.date)
    const series = [
      {
        name: '新增用户',
        type: 'bar',
        data: data.map(item => item.new)
      },
      {
        name: '活跃用户',
        type: 'bar',
        data: data.map(item => item.active)
      }
    ]
    setBarData({ xAxis, series })
  }

  // 格式化饼图所需数据
  const formatPieData = (data: HomeData.VideoData[]) => {
    const series = [
      {
        name: '视频播放量',
        type: 'pie',
        data: data
      }
    ]
    setPieData({ series })
  }

  // 副作用
  useEffect(() => {
    getGoods()
  }, [])

  // Html
  return (
    <Row className="home-view">
      <Col span={8}>
        <Card hoverable className="card-box">
          <div className="user-info">
            <div className="user-avatar">
              <img src={defaultImg} className="picture" />
            </div>
            <div className="user-name">
              <span className="name">Admin</span>
              <span className="role">管理员</span>
            </div>
          </div>
          <div className="login-info">
            <p className="time">
              上次登录时间：<span>2025年5月8日14:48:15</span>
            </p>
            <p className="address">
              上次登录地点：<span>上海</span>
            </p>
          </div>
        </Card>
        <Card hoverable className="card_table">
          <Table
            columns={Column}
            dataSource={tableData}
            pagination={false}
            rowKey={'name'}
          ></Table>
        </Card>
      </Col>
      <Col span={16}>
        <div className="num">
          {countData.map((item, index) => {
            return (
              <Card hoverable className="item-box" key={index}>
                <div
                  className="icon-box"
                  style={{ backgroundColor: item.color }}
                >
                  {iconCreate(item.icon)}
                </div>
                <div className="detail">
                  <p className="money">
                    <span>$</span>
                    <span>{item.value}</span>
                  </p>
                  <p className="text">
                    <span>{item.name}</span>
                  </p>
                </div>
              </Card>
            )
          })}
        </div>
        <div className="chart-wrap">
          <MyEchart
            style={{ width: '90%', height: '230px' }}
            option={orderData}
          />
        </div>
        <div className="bottom-chart">
          <div className="left">
            <MyEchart
              style={{ width: '90%', height: '230px' }}
              option={barData}
            />
          </div>
          <div className="right">
            <MyEchart
              style={{ width: '90%', height: '230px' }}
              option={pieData}
              isAxisChart={false}
            />
          </div>
        </div>
      </Col>
    </Row>
  )
}

export default Home
